<template>
    <el-card shadow="never" style="max-height: 700px; overflow: auto">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
            <el-form-item label="id:" prop="id" v-show="false">
                <el-input v-model="form.id" disabled />
            </el-form-item>

            <el-form-item label="店铺" prop="site_name">
                <SelectPage v-model="form.site_id" :url="'/admin/site/selectPage'" show_field="site_name" placeholder="请选择店铺" query_field="site_name" :multiple="false" />
            </el-form-item>

            <!-- <el-form-item label="店铺类型" prop="label">
                <el-radio-group @change="label_change" v-model="labels">
                    <el-radio-button label="单人店铺"></el-radio-button>
                    <el-radio-button label="多人店铺"></el-radio-button>
                </el-radio-group>
            </el-form-item> -->
            <el-form-item label="开始时间:" prop="createtime">
                <el-date-picker
                    v-model="form.createtime"
                    align="right"
                    type="datetime"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间:" prop="updatetime">
                <el-date-picker
                    v-model="form.updatetime"
                    align="right"
                    type="datetime"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="标签类型:" prop="label">
                <el-radio-group v-model="labels">
                    <el-radio-button label="主运营"></el-radio-button>
                    <el-radio-button label="副运营"></el-radio-button>
                </el-radio-group>
            </el-form-item>

            <p>主运营（包含邮件，新品标签，去掉副运营的业绩）</p>
            <p>副运营（只统计含有归属标签的订单）</p>
            <el-form-item label="运营:" prop="admin_id">
                <!--请将show_field，query_field =后面的id换成要展示和检索的字段，如 name或者title  ----->
                <SelectPage v-model="form.admin_id" :url="'/admin/system.admin/selectPage'" show_field="nickname" query_field="nickname" :multiple="false" />
            </el-form-item>

            <el-form-item label="归属标签:" prop="label">
                <el-input v-model="form.label" placeholder="副运营请添加单个归属标签,按标签算业绩" />
            </el-form-item>

            <el-form-item label="渠道类型:" prop="channel_type">
                <el-radio-group v-model="channel_types">
                    <el-radio-button label="FB"></el-radio-button>
                    <el-radio-button label="Google"></el-radio-button>
                    <el-radio-button label="TikTok"></el-radio-button>
                    <el-radio-button label="邮件"></el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">确认 </el-button>
                <el-button type="warning" @click="cancel">取消 </el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {},
        },
        editFormParams: {
            type: Object,
            default: {},
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
            },
            // 编辑表单验证规则
            rules: {
                admin_id: [{ required: true, message: '请输入运营', trigger: 'blur' }],
                site_id: [{ required: true, message: '请输入站点名称', trigger: 'blur' }],
            },
            form: {
            },
            labels: '主运营',
            channel_types: 'FB',
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                        this.labels = this.form.type
                        this.channel_types = this.form.channel_type
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.form.createtime = Date.parse(this.form.createtime);
                    this.form.updatetime = Date.parse(this.form.updatetime);
                    this.form.type = this.labels;
                    this.form.channel_type = this.channel_types;
                    this.$emit('submitForm', this.form)
                }
            })
        },
        label_change(val) {

        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
    },
}
</script>
